<template>
  <div class="main">
    <div class="letter-opening">知情同意书</div>
    <div class="letter-content">您好！</div>
    <div class="letter-content">
      <el-row v-model="formList">
        <el-col>
          {{formList[0].comment}}
        </el-col>
      </el-row>
      <!-- 本次心理测验仅作为了解您的心理现状的一个途径，所有问题的答案均无对错之分，请按照您的实际情况真实回答。测验结果严格保密，
      未经本人同意，不会提供给任何组织和个人。若您同意，请点击下方按钮，同意参加本次测验。 -->
    </div>
    <div class="juzhong">
      <el-form ref="form" :model="form" label-width="80px" class="form">
        <el-checkbox-group v-model="form.type">
          <el-checkbox label="我已知晓，同意参与本次测评" name="type" class="tongyi"></el-checkbox>
        </el-checkbox-group>
        <el-button type="primary" @click="onSubmit" class="anniu">参与作答</el-button>
      </el-form>
    </div>
    <div class="anniu2">
      <el-button type="primary" @click="onSubmit1" size="mini">返回</el-button>
    </div>


  </div>
</template>

<script>
import { listForm, getForm, delForm, addForm, updateForm } from "@/api/system/form";
export default {
  data () {
    return {
      scaleId:null,
      id:null,
      form: {
        type: []
      },// 查询参数
      queryParams: {
        comment: null,
        enable: null
      },
      // 知情同意书表格数据
      formList: [],
    }
  },
  created() {
    this.getList();
  },
  methods: {
    //获取路由参数
    getRouterQuery () {
      this.scaleId = this.$router.history.current.query.scaleId
      this.id = this.$router.history.current.query.id
      // console.log("到了",this.scaleId);
    },
    getList(){
      listForm(this.queryParams).then(response => {
        this.formList = response.rows;
        console.log("formList",this.formList);
      });
    } ,
    // 参与作答路由跳转
    onSubmit () {
      if (this.form.type.length == 1) {
        // 点击参与作答后需要跳转的路由
        this.getRouterQuery();
        console.log("知情权id",this.scaleId);
        this.$router.push({
        path: '/mentalTest/jiaolvshuiping',
        query: {
          scaleId: this.scaleId,
          id:this.id
        }
        })
      }
      else {
        this.$alert('请阅读并且点击知晓框', '提示', {
          confirmButtonText: '确定',
        });
      }

    },
    // 返回路由跳转
    onSubmit1 () {
      this.$router.push({
        path: '/mentalTest/myTest',
        query: {
          // scaleId: row.scaleId
        }
      })
    }
  }

}
</script>

<style>
.main {
  display: flex;
  flex-flow: column nowrap;
  /* 在主轴上居中对齐 */
  padding-top: 20px;
  /* 上边距为10像素 */
  padding-right: 100px;
  /* 右边距为20像素 */
  padding-left: 100px;
  /* 左边距为5像素 */
}

.letter-opening {
  font-family: 宋体, SimSun, STSong, sans-serif;
  font-size: 50px;
  /* 根据需要调整字体大小 */
  line-height: 1.5;
  /* 根据需要调整行高 */
  text-align: justify;
  /* 根据需要调整文本对齐方式 */
  /* 如果你希望开头更显眼一些，你可以尝试添加一些额外的样式，比如加粗或者变大 */
  font-weight: bold;
  /* 加粗字体 */
  margin-bottom: 15px;
  /* 下边距为15像素 */
}

.letter-content {
  font-family: 微软雅黑, Microsoft YaHei, Arial, Helvetica, sans-serif;
  font-size: 18px;
  /* 根据需要调整字体大小 */
  line-height: 1.6;
  /* 根据需要调整行高 */
  text-align: justify;
  /* 根据需要调整文本对齐方式 */
}

.juzhong {
  margin-top: 100px;
  /* 上边距为10像素 */
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  /* 在主轴上居中对齐 */
}

.tongyi {
  color: #5E9DDC;
}

.form {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}

.anniu {
  margin-top: 10px;
  /* 上边距为10像素 */
}

.anniu2 {
  display: flex;
  flex-flow: row-reverse nowrap;
}
</style>